<template>
  <div class="home-wrap">
    <header>猫眼电影</header>

    <transition
      enter-active-class="animate__animated animate__fadeIn"
      leave-active-class="animate__animated animate__fadeOut"
    >
      <router-view></router-view>
    </transition>

    <div class="tabbar">
      <van-tabbar
        v-model="active"
        route
        active-color="#cd4c42"
        inactive-color="#999"
      >
        <van-tabbar-item to="/home/movies/intheaters">
          <span>电影</span>
          <template #icon="props">
            <van-icon class-prefix="icon-font" name="movies" />
          </template>
        </van-tabbar-item>
        <van-tabbar-item to="/home/theaters">
          <span>影院</span>
          <template #icon="props">
            <van-icon class-prefix="icon-font" name="theaters" />
          </template>
        </van-tabbar-item>
        <van-tabbar-item to="/home/profile">
          <span>我的</span>
          <template #icon="props">
            <van-icon class-prefix="icon-font" name="profile" />
          </template>
        </van-tabbar-item>
      </van-tabbar>
    </div>

    <!-- <nav class="tabbar">
      <ul>
        <router-link to="/home/movies" tag="li" active-class="active">
          <b class="iconfont">&#xe8ae;</b>
          <span>电影</span>
        </router-link>
        <router-link to="/home/theaters" tag="li" active-class="active">
          <b class="iconfont">&#xe8c0;</b>
          <span>影院</span>
        </router-link>
        <router-link to="/home/profile" tag="li" active-class="active">
          <b class="iconfont">&#xe606;</b>
          <span>我的</span>
        </router-link>
      </ul>
    </nav> -->
  </div>
</template>

<script>
import Movies from "@/views/home/movies/Movies";

export default {
  data() {
    return {
      active: 0,
    };
  },
  components: {
    Movies,
  },
};
</script>

<style lang="stylus" scoped>
@import '~@/assets/stylus/icon.styl'

  .home-wrap
    display flex
    flex-direction column
    height 100%
    header
      background #cd4c42
      color #fff
      height .44rem
      font-size .16rem
      font-weight bold
      text-align center
      line-height .44rem
      &::before
        content '\e8ae'
        font-family iconfont
      &::after
        content '\e8ae'
        font-family iconfont
    .tabbar
      height .44rem
      border1px(1px 0 0 0)
      ul
        display flex
        li
          flex 1
          display flex
          flex-direction column
          justify-content center
          align-content center
          text-align center
          padding-top .06rem
          color #999
          &.active
            color #cd4c42
          b
            font-size .26rem
            font-weight normal
            line-height .2rem
          span
            font-size .12rem
            transform scale(0.9)
</style>
